<template>
    <NavBar />
    <el-main class="container">
        <router-view v-slot="{ Component }">
            <Transition name="fade" mode="out-in">
                <keep-alive>
                    <component :is="Component" :key="$route.path" v-if="$route.meta.keepAlive" />
                </keep-alive>
            </Transition>
            <Transition name="fade" mode="out-in">
                <component :is="Component" :key="$route.path" v-if="!$route.meta.keepAlive" />
            </Transition>
        </router-view>
    </el-main>
    <el-divider style="width: 80%; margin: 20px 10%"></el-divider>
</template>

<script setup lang="ts">
    import { RouterLink, RouterView, useRoute } from 'vue-router';
    import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue';
    import NavBar from '@/components/NavBar.vue'


    const route = useRoute();

    let isMobile = ref(window.innerWidth <= 768);
    let dropdown = ref();

    const isActive = (path: any) => {
        if (path === 'ecDNA') {
            return route.name === 'search' || route.name === 'ecDetail';
        } else if (path === 'depmapExplore') {
            return (
                route.name === 'depmapExplore' ||
                route.name === 'analysis' ||
                route.name === 'depDetail' ||
                route.name === 'cytoscape'
            );
        }
    };

    function closeDropdown() {
        dropdown.value.handleClose();
    }

    onBeforeMount(() => {
        const canvas: any = document.getElementById('myCanvas');
        const context = canvas?.getContext('2d', { willReadFrequently: true });
    });
</script>

<style scoped>
    a {
        text-decoration: none;
    }

    a:hover {
        color: #98d14d;
    }

    .header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        font-size: 25px;
        line-height: 60px;
        background: rgb(44, 62, 80);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* padding-left: 10%; */
    }

    .container {
        width: 85%;
        margin: auto;
        min-height: 80vh;
        background-color: #f5f7f9;
    }

    .logo {
        margin-left: 10%;
        color: white;
        display: block;
        text-align: center;
        align-items: center;
    }

    .router {
        height: 100%;
        margin-right: 7.5%;
        display: flex;
        white-space: nowrap;
        justify-content: flex-end;
        text-align: center;
        align-items: center;
        margin-left: auto;
    }

    .router-item {
        width: 100%;
        height: 100%;
        padding: 0px 5px;
        color: white;
        margin: 5px;
        border-radius: 5px;
        line-height: 70px;
        display: flex;
        align-items: center;
        font-size: large;
        justify-content: center;
        /* text-align: center; */
    }

    .router-item.active {
        width: 100%;
        height: 100%;
        color: #98d14d;
        font-weight: bold;
        padding: 5px 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
    }

    .footer-container {
        width: 80%;
        display: flex;
        margin: auto;
        justify-content: space-between;
        text-align: center;
    }

    .rights {
        display: flex;
        margin-left: 20px;
        padding-right: 20px;
        margin-right: 5%;
        align-items: center;
    }

    .rights div {
        margin-right: 10px;
    }

    .rights-text {
        font-size: small;
    }

    .dropdown-toggle {
        display: flex;
        /* 使用inline-block保持元素的行内特性 */
        width: 100%;
        /* 确保不会超出容器宽度 */
        text-align: center;
        /* 使文本居中 */
        vertical-align: middle;
        /* 使元素在垂直方向上居中 */
        --dropdown-width: 100%;
        position: relative;
    }

    .dropdown-toggle:hover .dropdown-menu {
        display: flex;
        /* 当悬停时显示下拉菜单 */
        width: 100%;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: white;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        padding-left: 12px;
        white-space: nowrap;
        width: 100%;
        /* margin: 10px; */
        font-size: large;
    }

    .menu-icon {
        margin: 20px;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
        }
    }
</style>
